
<script setup lang="ts">
import {ref,} from "vue";
import axios from "axios";
import macros from "../../macros";
import {router} from "../../main.js";
const imageList=ref([]) //模板引用
var videoList=ref([]);
var excep;
axios.get(macros.server+"/api/videolist")
    .then(function (response){
      videoList.value=response.data.data;
    }).catch(function (error){
  excep=error;
  console.log(error);
});

var percent:number=0;
var key:string;
var uploadinfo="上传中："+percent+"%";
var showUploadInfo:boolean=false;
var succeed=false;
function deletevideo(videoid:number){
  axios.delete(macros.server+"/api/deletevideo",{params:{id:videoid}})
      .then(function (response) {
        const toDelete=document.getElementById(String(videoid));
        toDelete.hidden=true;
      }).catch(
      function (error){
        console.log(error);
        alert("删除失败");
      }
  );
}
</script>

<template>
  <h2>我们的作品</h2>
  <button @click="router.push('/admin/addvideo')">添加</button><br/>
  <div v-for="(video,i) in videoList" style="display: inline-table; vertical-align:bottom;" :id="video.id">
    <table>
      <tr>
        <td>
          <img :src="video.image" class="mx-auto d-block video" style="display: inline-block">
        </td>
      </tr>
      <tr>
        <td>
          <button @click="deletevideo(video.id)">删除</button>
        </td>
      </tr>
    </table>
  </div>
</template>

<style scoped>
@media only screen and (max-width: 600px) {
  .video{
    width: 80vw;
  }
}
@media only screen and (min-width: 600px) {
  .video{
    width: 20vw;
  }
}
</style>